<template>
  <div>
    <div class="pad-20 bgc-default">
      <!-- <detail :memberId="memberId"></detail> -->
      <div class="pad-20 bg-color-white">
        <div class="flex flex-between base">
          <div class="flex base-info">
            <div class="shopkeeper">顾客信息</div>
            <div class="user-img-box">
              <img class="headshop" :src="member.avatar" alt="">
              <div class="vip-icon-box" v-if="member.memberFlag == 1">
                <img :src="vipIcon">
              </div>
            </div>
            <div class="info-bar">
              <h3>
                <span>基本信息</span>
                <el-button class="mar-l-10" type="text" @click="editRemark">设置</el-button>
              </h3>
              <div>
                <label>微信昵称：</label>
                <span>{{member.nickname}}</span>
              </div>
              <div>
                <label>手机号：</label>
                <span>{{member.phone}}</span>
              </div>
              <div>
                <label>注册时间：</label>
                <span>{{member.createTime}}</span>
              </div>
              <div>
                <label>主播权限：</label>
                <span>{{member.anchorAuthority === 1 ? '已开启' : '未开启'}}</span>
              </div>
              <div class="flex flex-between width-280">
                <div>
                  <label>备注：</label>
                  <span>{{member.remarkName}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="margin-container-list">
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="订单" name="1"></el-tab-pane>
          <el-tab-pane label="更多信息" name="2"></el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <project-order v-if="activeName == '1'" :customerMemberId="customerMemberId" :memberId="memberId">
        </project-order>
        <custom-info v-if="activeName == '2'" :targetId="customerMemberId" moduleCode="1001"></custom-info>
      </div>
    </div>

    <!-- 拒绝通过 -->
    <el-dialog title="备注" :visible.sync="remarkVisible" :close-on-press-escape="true" width="460px">
      <div style="padding:20px;">
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="memberRemark.remarkName">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRemark">确认</el-button>
        <el-button @click="remarkVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Detail from '@/components/Member/Detail'
  import projectOrder from './project-order'
  import customInfo from './custom-info'
  import vipIcon from '@/assets/images/vip-icon.png'
  import {
    getMember,
    saveMemberRemark
  } from '@/api/user/member'

  export default {
    components: {
      Detail,
      projectOrder,
      customInfo
    },
    data() {
      return {
        memberId: '',
        customerMemberId: '',
        memberRemark: {
          memberRemarkId: '',
          remarkType: 1,
          remarkName: '',
          memberId: '',
          userId: this.getEnterpriseId()
        },
        remarkVisible: false,
        member: {},
        // tab对象
        activeName: '1',
        vipIcon
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.memberId) {
        this.memberId = queryParams.memberId
      }
      if (queryParams && queryParams.customerMemberId) {
        this.customerMemberId = queryParams.customerMemberId
      }
      this.initGetMember()
    },
    methods: {
      initGetMember() {
        getMember(this.customerMemberId).then(response => {
          if (response.isError) return
          this.member = response.data
        })
      },
      submitRemark() {
        saveMemberRemark(this.memberRemark).then(response => {
          if (response.isError) return
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.remarkVisible = false
          this.initGetMember()
        })
      },
      editRemark() {
        this.memberRemark.memberRemarkId = this.member.memberRemarkId
        this.memberRemark.memberId = this.member.memberId
        this.memberRemark.remarkName = this.member.remarkName
        this.memberRemark.remarkType = '4'
        this.memberRemark.userId = this.getEnterpriseId()
        this.remarkVisible = true
      }
    }
  }
</script>

<style lang="less" scoped>
  .base {
    height: 250px;
    width: 580px;
    box-shadow: 0 0 14px 2px rgba(154, 154, 154, 0.18);
    box-sizing: border-box;
  }

  .shopkeeper {
    height: 250px;
    width: 40px;
    background-color: #409EFF;
    color: white;
    word-wrap: break-word;
    /*英文的时候需要加上这句，自动换行*/
    /*自测了这句话没啥用*/
    writing-mode: vertical-rl;
    /*从左向右 从右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-rl;
    /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
    text-align: center;
    padding: 0px;
    display: flex;
    -webkit-display: flex;
    flex-direction: column;
    /* align-content: center; */
    /* vertical-align: middle; */
    justify-content: center;
  }

  .user-img-box {
    position: relative;

    .vip-icon-box {
      position: absolute;
      top: 40px;
      right: 108px;
      transform: rotate(315deg);
    }
  }

  .info-bar {
    line-height: 26px;
    margin-top: 50px;
  }

  .headshop {
    margin-left: 70px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin-right: 37px;
    margin-top: 50px;
  }

  .base-info {
    font-size: 14px;

    h3 {
      margin-top: 0;
    }

    label {
      color: #999999;
      width: 70px;
      display: inline-block;
    }

    .el-button {
      padding: 0;
    }
  }
</style>
